<template>
  <div class="px-20 py-5" id="div-1">
    <a-flex justify="space-between" id="a-flex-1">
      <a-flex gap="5" id="a-flex-1">
        <a-tag class="text-[12px] !px-1 !py-0" color="#DC3E3F" id="a-tag-1">热</a-tag>
        <a-typography-link href="#" id="a-typography-link-1" v-for="(item, index) in list.one" :key="index">
          <a-typography-text class="text-[12px]" :class="{ 'text-[#000] font-bold': index === 0 }" id="a-typography-text-1">
            {{ item }}
          </a-typography-text>
        </a-typography-link>
      </a-flex>
      <a-flex gap="5" id="a-flex-2">
        <SlackSquareOutlined class="text-[#2C589D] pt-[1px]" id="a-icon-1" />
        <a-typography-link href="#" id="`a-typography-link-2`" v-for="(item, index) in list.two" :key="index">
          <a-typography-text class="text-[12px]" :class="{ 'text-[#000] font-bold': index === 0 }" id="a-typography-text-2">
            {{ item }}
          </a-typography-text>
        </a-typography-link>
      </a-flex>
      <a-flex gap="5" id="a-flex-3">
        <SlackSquareOutlined class="text-[#05BAE0] pt-[1px]" id="a-icon-2" />
        <a-typography-link href="#" id="`a-typography-link-3-${index}`" v-for="(item, index) in list.three" :key="index">
          <a-typography-text class="text-[12px]" :class="{ 'text-[#000] font-bold': index === 0 }" id="a-typography-text-3">
            {{ item }}
          </a-typography-text>
        </a-typography-link>
      </a-flex>
      <a-flex gap="5" id="a-flex-4">
        <SlackSquareOutlined class="text-[#0942CA] pt-[1px]" id="a-icon-3" />
        <a-typography-link href="#" id="a-typography-link-4">
          <a-typography-text class="text-[12px] text-[#000] font-bold" id="a-typography-text-4"> 全球进出口数据查询系统 </a-typography-text>
        </a-typography-link>
      </a-flex>
    </a-flex>
    <a-flex gap="15" id="a-flex-5">
      <a-flex justify="space-between" gap="5" class="w-full py-3" id="a-flex-1">
        <a-typography-link href="#" :id="`a-typography-link-5-${index}`" v-for="(item, index) in list1" :key="index">
          <SlackSquareOutlined v-if="index === 0" class="text-[#2C589D] pr-1" :id="`a-icon-4-${index}`" />
          <a-typography-text class="text-[12px]" :class="{ 'text-[#000] font-bold': index === 0 }" :id="`a-typography-text-5-${index}`">
            {{ item }}
          </a-typography-text>
        </a-typography-link>
      </a-flex>
    </a-flex>
    <a-typography-link class="w-full" href="#" id="a-typography-link-6">
      <a-image width="100%" class="!h-[50px]" src="https://picsum.photos/id/1/1000/50" :preview="false" id="a-image-1" />
    </a-typography-link>
    <a-flex justify="space-between" gap="10" class="mt-2" id="a-flex-6">
      <a-typography-paragraph
        v-for="(item, index) in list2"
        :key="index"
        :class="item.style"
        class="flex-1 p-2"
        :id="`a-typography-paragraph-1-${index}`"
      >
        <a-typography-link href="#" class="w-full" :id="`a-typography-link-7-${index}`">
          <a-flex vertical justify="space-between" align="center" :id="`a-flex-7-${index}`" class="h-full">
            <a-typography-text class="text-[14px]" :id="`a-typography-text-6-${index}`">
              {{ item.name }}
            </a-typography-text>
            <a-typography-text class="text-[18px] font-bold" :id="`a-typography-text-7-${index}`">
              {{ item.title }}
            </a-typography-text>
            <a-typography-text class="text-[14px]" :id="`a-typography-text-8-${index}`">
              {{ item.subTitle }}
            </a-typography-text>
            <a-typography-text class="text-[14px]" :id="`a-typography-text-9-${index}`">
              {{ item.time }}
            </a-typography-text>
          </a-flex>
        </a-typography-link>
      </a-typography-paragraph>
    </a-flex>

    <a-flex class="border border-[#ddd] border-solid" id="a-flex-8">
      <a-flex vertical justify="center" class="flex-1 pl-2 pr-5 bg-[#F8F8F8]" id="a-flex-9">
        <a-typography-link href="#" id="a-typography-link-8">
          <a-typography-text class="text-[18px] font-bold line-clamp-1" id="a-typography-text-10"> 01月17日 </a-typography-text>
        </a-typography-link>
        <a-typography-link href="#" id="a-typography-link-9">
          <a-typography-text class="text-[12px] text-[#fff] pl-1 bg-[#000]" id="a-typography-text-11"> 2025 </a-typography-text>
        </a-typography-link>
      </a-flex>

      <a-flex align="center" justify="center" v-for="(item, index) in list3" :key="index" class="min-h-[100px] flex-1" :id="`a-flex-10-${index}`">
        <a-typography-link class="flex flex-col line-clamp-1" :id="`a-typography-link-10-${index}`">
          <a-typography-paragraph :id="`a-typography-paragraph-2-${index}`">
            <a-typography-text :id="`a-typography-text-12-${index}`"> {{ item.name }} </a-typography-text>
            <a-typography-text class="text-[12px] text-[#B3B3B3]" :id="`a-typography-text-13-${index}`"> （元/吨） </a-typography-text>
          </a-typography-paragraph>

          <a-typography-paragraph v-if="item.type === 'up'" class="flex justify-between !mb-0" :id="`a-typography-paragraph-3`">
            <a-typography-text class="text-[red]" :id="`a-typography-text-14-${index}`"> {{ item.one }} </a-typography-text>
            <ArrowUpOutlined class="text-[red]" :id="`a-icon-5-${index}`" />
            <a-typography-text class="text-[red]" :id="`a-typography-text-15-${index}`">
              {{ item.two }}
            </a-typography-text>
          </a-typography-paragraph>

          <a-typography-paragraph v-if="item.type === 'down'" class="flex justify-between !mb-0" :id="`a-typography-paragraph-4-${index}`">
            <a-typography-text class="text-[green]" :id="`a-typography-text-16-${index}`"> {{ item.one }} </a-typography-text>
            <ArrowDownOutlined class="text-[green]" :id="`a-icon-6-${index}`" />
            <a-typography-text class="text-[green]" :id="`a-typography-text-17-${index}`">
              {{ item.two }}
            </a-typography-text>
          </a-typography-paragraph>
        </a-typography-link>
      </a-flex>
    </a-flex>

    <a-row :gutter="10" class="mt-5" id="a-row-1">
      <a-col :span="8" id="a-col-1">
        <a-flex justify="space-between" align="center" class="!mb-2" id="a-flex-11">
          <a-typography-title :level="5" class="line-clamp-1 !mb-0" id="a-typography-title-1">大宗商品价格涨跌</a-typography-title>
          <a-typography-text class="text-[12px] text-[#B5BCBE]" id="a-typography-text-18">2025-01-06</a-typography-text>
        </a-flex>
        <a-table bordered :data-source="list4" size="middle" :pagination="false" id="a-table-7">
          <a-table-column key="1" title="产品" data-index="name" id="a-table-column-7"></a-table-column>
          <a-table-column key="2" title="价格" data-index="price" id="a-table-column-7"></a-table-column>
          <a-table-column key="3" title="涨跌额" data-index="down1" id="a-table-column-7">
            <template #default="{ text: tags }">
              <a-typography-text id="a-typography-text-19">
                {{ tags }}<ArrowDownOutlined class="text-[green] pl-1" id="a-icon-7" />
              </a-typography-text>
            </template>
          </a-table-column>
          <a-table-column key="3" title="涨跌幅" data-index="down2" id="a-table-column-7">
            <template #default="{ text: tags }">
              <a-typography-text id="a-typography-text-20">
                {{ tags }}<ArrowDownOutlined class="text-[green] pl-1" id="a-icon-8" />
              </a-typography-text>
            </template>
          </a-table-column>
        </a-table>
      </a-col>
      <a-col :span="8" class="flex justify-between flex-col" id="a-col-2">
        <a-flex vertical id="a-flex-12">
          <a-flex justify="space-between" align="center" class="!mb-2">
            <a-typography-title :level="5" class="line-clamp-1 !mb-0" id="a-typography-title-2">百川盈孚视点</a-typography-title>
            <a-typography-link class="text-[12px] !text-[#B5BCBE]" id="a-typography-link-11">更多>></a-typography-link>
          </a-flex>
          <a-typography-link class="flex flex-col" id="a-typography-link-12">
            <a-flex vertical justify="space-between" class="bg-[#3867AB] py-3 px-5" id="a-flex-13">
              <a-typography-text class="text-[#fff] line-clamp-2 py-1" id="a-typography-text-21"
                >【波化天然气】节前需求下降，国产LNG价格上涨受限
              </a-typography-text>
              <a-typography-text class="text-[#fff] line-clamp-3 py-1" id="a-typography-text-22"
                >据百川盈浮统计今日国内LNG市场均价为4502元/吨，较1月104472元/吨上调30元/吨，涨幅
              </a-typography-text>

              <a-flex justify="space-between" align="center" class="py-1" id="a-flex-14">
                <a-button class="text-[#5078C1] !text-[12px]" size="small" id="a-button-1">点击查看详情</a-button>
                <a-typography-paragraph class="flex flex-col !mb-0" id="a-typography-paragraph-5">
                  <a-typography-text class="text-[#fff]" id="a-typography-text-23">百川盈孚行业分析集</a-typography-text>
                  <a-typography-text class="text-[#fff]" id="a-typography-text-24"> 张琳英 </a-typography-text>
                </a-typography-paragraph>
              </a-flex>
            </a-flex>
          </a-typography-link>
        </a-flex>
        <a-typography-link class="flex items-center py-2" :id="`a-typography-link-13-${index}`" v-for="(item, index) in list5" :key="index">
          <a-typography-paragraph class="w-1 h-1 bg-[#ddd] !mb-0" :id="`a-typography-paragraph-6-${index}`"></a-typography-paragraph>
          <a-typography-text class="font-bold" :id="`a-typography-text-25-${index}`">{{ item.name }}</a-typography-text>
          <a-typography-text :id="`a-typography-text-26-${index}`">{{ item.title }}</a-typography-text>
        </a-typography-link>
      </a-col>
      <a-col :span="8" id="a-col-3">
        <a-typography-title :level="5" class="line-clamp-1 !mb-2" id="a-typography-title-3">战略合作单位</a-typography-title>

        <a-row v-for="(item, index) in list7" :key="index" class="border border-[#ddd] border-solid" :id="`a-row-2-${index}`">
          <a-col :span="6" class="bg-[#2B304D] p-2" :id="`a-col-4-${index}`">
            <a-typography-link class="h-full flex justify-center items-center" :id="`a-typography-link-14-${index}`">
              <a-typography-text class="text-[#fff] !w-[120px] line-clamp-2" :id="`a-typography-text-27-${index}`">{{ item.name }}</a-typography-text>
            </a-typography-link>
          </a-col>
          <a-col :span="18" :id="`a-col-5-${index}`">
            <a-typography-link class="flex flex-col p-2" :id="`a-typography-link-15-${index}`">
              <a-typography-text :id="`a-typography-text-28-${index}`" class="line-clamp-2">{{ item.title }}</a-typography-text>
              <a-typography-paragraph v-if="item.tag" class="!mb-0" :id="`a-typography-paragraph-7-${index}`">
                <a-button type="link" v-for="(it, ind) in item.tag" :key="ind" class="h-auto !p-0 mr-1" :id="`a-button-2-${ind}`">{{ it }}</a-button>
              </a-typography-paragraph>
            </a-typography-link>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
    <a-row :gutter="10" class="mt-5" id="a-row-3">
      <a-col :span="8" id="a-col-6">
        <a-flex vertical class="p-2 border border-[#ddd] border-solid" id="a-flex-15">
          <a-flex justify="space-between" align="center" class="!mb-2">
            <a-typography-title :level="5" class="line-clamp-1 !mb-0" id="a-typography-title-4">行业快讯</a-typography-title>
            <a-typography-link class="text-[12px] !text-[#B5BCBE]" id="a-typography-link-16">更多>></a-typography-link>
          </a-flex>
          <a-image width="100%" class="!h-[100px]" src="https://picsum.photos/id/2/1000/100" :preview="false" id="a-image-2" />
          <a-typography-link
            class="flex items-center py-1"
            v-for="(item, index) in list77"
            :key="index"
            :id="`a-typography-link-17-${index}`"
          >
            <a-typography-paragraph
              class="w-1 h-1 rounded-full bg-blue-500 !mb-0 mx-1"
              :id="`a-typography-paragraph-8-${index}`"
            ></a-typography-paragraph>
            <a-typography-text class="line-clamp-1" :id="`a-typography-text-29-${index}`">{{ item }}</a-typography-text>
          </a-typography-link>
        </a-flex>
      </a-col>
      <a-col :span="8" id="a-col-7">
        <a-flex vertical class="border border-[#ddd] border-solid" id="a-flex-16">
          <a-flex justify="space-between" align="center" class="p-2 border-[0] border-b-[1px] border-solid border-[#ddd]" id="a-flex-17">
            <a-typography-title :level="5" class="line-clamp-1 !mb-0" id="a-typography-title-5">行业快讯</a-typography-title>
            <a-typography-link class="text-[12px] !text-[#B5BCBE]" id="a-typography-link-18">更多>></a-typography-link>
          </a-flex>
          <a-flex vertical class="p-2" id="a-flex-18">
            <a-typography-link
              class="flex items-center py-1"
              :id="`a-typography-link-19-${index}`"
              v-for="(item, index) in list777"
              :key="index"
            >
              <a-typography-paragraph
                class="w-1 h-1 rounded-full bg-blue-500 !mb-0 mx-1"
                :id="`a-typography-paragraph-9-${index}`"
              ></a-typography-paragraph>
              <a-typography-text class="line-clamp-2" :id="`a-typography-text-30-${index}`">{{ item }}</a-typography-text>
            </a-typography-link>
          </a-flex>
        </a-flex>
      </a-col>
      <a-col :span="8" id="a-col-8">
        <a-flex vertical justify="space-between" class="border border-[#ddd] border-solid h-full" id="a-flex-18">
          <a-image width="100%" class="!h-[100px]" src="https://picsum.photos/id/3/1000/100" :preview="false" id="a-image-3" />
          <a-image width="100%" class="!h-[100px]" src="https://picsum.photos/id/4/1000/100" :preview="false" id="a-image-4" />
        </a-flex>
      </a-col>
    </a-row>

    <a-divider class="h-1 !mb-0 bg-[#000155]" id="a-divider-1" />

    <a-flex vertical justify="space-between" class="p-3 bg-[#F8F8F8]" id="a-flex-19">
      <a-typography-link id="a-typography-link-20">
        <a-typography-text class="text-[16px] font-bold" id="a-typography-text-31"> 大宗商品价格 </a-typography-text>
      </a-typography-link>
    </a-flex>

    <a-flex class="my-2" justify="space-between" id="a-flex-20">
      <a-tag flex="1 1 auto" class="mr-2" color="default" v-for="(item, index) in list8" :key="index" :id="`a-tag-2-${index}`">{{
        item
      }}</a-tag>
    </a-flex>

    <a-row :gutter="10" class="mt-3" id="a-row-4">
      <a-col :span="8" id="a-col-9">
        <a-flex justify="space-between" align="center" class="p-2 pl-0" id="a-flex-21">
          <a-typography-title :level="5" class="line-clamp-1 !mb-0" id="a-typography-title-6">大宗商品价格数据</a-typography-title>
          <a-typography-link class="text-[12px] !text-[#B5BCBE]" id="a-typography-link-21">更多>></a-typography-link>
        </a-flex>
        <a-flex vertical class="border border-[#ddd] border-solid" id="a-flex-22">
          <a-flex align="center" class="p-2 border-[0] border-b-[1px] border-solid border-[#ddd]" id="a-flex-23">
            <a-typography-link class="text-[12px] pr-3" id="a-typography-link-22">市场价格</a-typography-link>
            <a-typography-link class="text-[12px] !text-[#4E4940] pr-3" id="a-typography-link-23">出厂价格</a-typography-link>
            <a-typography-link class="text-[12px] !text-[#4E4940] pr-3" id="a-typography-link-24">国际价格</a-typography-link>
            <a-typography-link class="text-[12px] !text-[#4E4940]" id="a-typography-link-25">期货价格</a-typography-link>
          </a-flex>
          <a-image width="100%" class="p-2 !h-[300px]" src="https://picsum.photos/id/5/1000/300" :preview="false" id="a-image-5" />
        </a-flex>
      </a-col>
      <a-col :span="8" id="a-col-10">
        <a-flex justify="space-between" align="center" class="p-2 pl-0" id="a-flex-24">
          <a-typography-title :level="5" class="line-clamp-1 !mb-0" id="a-typography-title-7">大宗商品供需数据</a-typography-title>
          <a-typography-link class="text-[12px] !text-[#B5BCBE]" id="a-typography-link-26">更多>></a-typography-link>
        </a-flex>
        <a-flex vertical class="border border-[#ddd] border-solid" id="a-flex-25">
          <a-flex align="center" class="p-2 border-[0] border-b-[1px] border-solid border-[#ddd]" id="a-flex-26">
            <a-typography-link class="text-[12px] pr-3" id="a-typography-title-7">产能</a-typography-link>
            <a-typography-link class="text-[12px] !text-[#4E4940] pr-3" id="a-typography-link-27">产量</a-typography-link>
            <a-typography-link class="text-[12px] !text-[#4E4940] pr-3" id="a-typography-link-28">开工率</a-typography-link>
            <a-typography-link class="text-[12px] !text-[#4E4940] pr-3" id="a-typography-link-29">消费</a-typography-link>
            <a-typography-link class="text-[12px] !text-[#4E4940] pr-3" id="a-typography-link-30">库存</a-typography-link>
            <a-typography-link class="text-[12px] !text-[#4E4940] pr-3" id="a-typography-link-31">进出口</a-typography-link>
            <a-typography-link class="text-[12px] !text-[#4E4940]" id="a-typography-link-32">毛利润</a-typography-link>
          </a-flex>
          <a-image width="100%" class="p-2 !h-[300px]" src="https://picsum.photos/id/6/1000/300" :preview="false" id="a-image-6" />
        </a-flex>
      </a-col>
      <a-col :span="8" id="a-col-11">
        <a-typography-title :level="5" class="p-2 pl-0 line-clamp-1 !mb-0" id="a-typography-title-8">大宗商品价格数据库</a-typography-title>
        <a-flex vertical class="border border-[#ddd] border-solid" id="a-flex-27">
          <a-flex align="center" wrap="wrap" gap="20" class="p-4" id="a-flex-28">
            <a-typography-link
              v-for="(item, index) in list9"
              :key="index"
              class="!text-[#4E4940] bg-[#F8F8F8] px-8 py-2 border-[1px] border-solid border-[#ddd]"
              :id="`a-typography-link-33-${index}`"
              >{{ item }}</a-typography-link
            >
          </a-flex>
          <a-flex justify="space-between" align="center" class="bg-[#F8F8F8] p-2" id="a-flex-29">
            <a-typography-link class="line-clamp-1" id="a-typography-link-34">
              更多数据欢迎试用 百川盈学行业大数据智能分析系线
            </a-typography-link>
            <a-typography-link class="text-[12px] !text-[#B5BCBE]" id="`a-typography-link-35-${index}`">更多>></a-typography-link>
          </a-flex>
        </a-flex>
        <a-image width="100%" class="pt-5 !h-[165px]" src="https://picsum.photos/id/7/1000/165" :preview="false" id="a-image-7" />
      </a-col>
    </a-row>

    <a-row :gutter="10" class="mt-3" id="a-row-5">
      <a-col :span="8" id="a-col-12">
        <a-flex justify="space-between" align="center" class="p-2 pl-0" id="a-flex-30">
          <a-typography-title :level="5" class="line-clamp-1 !mb-0" id="a-typography-title-9">宏观经济</a-typography-title>
          <a-typography-link class="text-[12px] !text-[#B5BCBE]" id="a-typography-link-36">更多>></a-typography-link>
        </a-flex>
        <a-typography-paragraph class="!mb-0 pb-11 border border-[#ddd] border-solid" id="a-typography-paragraph-10">
          <a-flex
            justify="space-between"
            align="center"
            class="p-2"
            :class="{ 'bg-[#F8F8F8]': index % 2 !== 0 }"
            v-for="(item, index) in list10"
            :key="index"
            :id="`a-flex-31-${index}`"
          >
            <a-typography-link class="text-[12px]" :id="`a-typography-link-37-${index}`">
              <a-typography-text :class="{ 'text-[red]': index === 4 }" class="line-clamp-1" :id="`a-typography-text-32-${index}`">{{
                item.name
              }}</a-typography-text>
            </a-typography-link>
            <a-typography-text class="text-[12px] text-[#979496] line-clamp-1" :id="`a-typography-text-33-${index}`">{{ item.time }}</a-typography-text>
          </a-flex>
        </a-typography-paragraph>
      </a-col>
      <a-col :span="8" id="a-col-13">
        <a-flex justify="space-between" align="center" class="p-2 pl-0" id="a-flex-32">
          <a-typography-link class="flex items-center" id="a-typography-link-38">
            <a-typography-title :level="5" class="line-clamp-1 !mb-0" id="a-typography-title-10"> 大宗商品进出口数据 </a-typography-title>
            <a-typography-text class="text-[12px] text-[#979496] pl-1 line-clamp-1" id="a-typography-text-34">(千克)</a-typography-text>
          </a-typography-link>

          <a-typography-link class="text-[12px] !text-[#B5BCBE]" id="a-typography-link-39">更多>></a-typography-link>
        </a-flex>
        <a-table bordered :data-source="list11" size="small" :pagination="false" id="a-table-38">
          <a-table-column key="1" title="名称" data-index="name" id="a-table-column-38"></a-table-column>
          <a-table-column key="2" title="日期" data-index="time" id="a-table-column-38"></a-table-column>
          <a-table-column key="2" title="进口数量" data-index="num1" id="a-table-column-38"></a-table-column>
          <a-table-column key="2" title="出口数量" data-index="num2" id="a-table-column-38"></a-table-column>
        </a-table>
      </a-col>
      <a-col :span="8" id="a-col-14">
        <a-typography-title :level="5" class="p-2 pl-0 line-clamp-1 !mb-0" id="a-typography-title-11">大宗商品价格数据库</a-typography-title>
        <a-flex vertical class="relative border border-[#ddd] border-solid p-2" id="a-flex-33">
          <a-flex vertical align="center" class="absolute top-4 left-4" id="a-flex-34">
            <a-typography-link class="text-[16px] !text-[#000]" id="a-typography-link-40">百川盈孚</a-typography-link>
            <a-typography-link class="text-[12px] !text-[#000]" id="a-typography-link-41">BAIINFO</a-typography-link>
          </a-flex>

          <a-typography-link width="100%" class="h-[180px] bg-[#CCF2F2]" id="a-typography-link-7"></a-typography-link>

          <a-flex align="center" wrap="wrap" id="a-flex-35">
            <a-flex align="center" wrap="wrap" gap="16" class="p-2" id="a-flex-26">
              <a-typography-paragraph
                v-for="(item, index) in list12"
                :key="index"
                class="!mb-0 line-clamp-1"
                :id="`a-typography-paragraph-11-${index}`"
              >
                <a-typography-link
                  v-for="(it, ind) in item"
                  :key="ind"
                  class="pr-5"
                  :class="{ '!text-[#000]': ind === 0, '!text-[#4E4940]': ind !== 0 }"
                  :id="`a-typography-link-42-${ind}`"
                  >{{ it }}</a-typography-link
                >
              </a-typography-paragraph>
            </a-flex>
          </a-flex>
        </a-flex>
      </a-col>
    </a-row>

    <a-divider class="h-1 !mb-0 bg-[#000155]" id="a-divider-2"/>

    <a-flex justify="space-between" class="p-3 bg-[#F8F8F8]" id="a-flex-37">
      <a-typography-link class="text-[16px] !text-[#000] font-bold" id="a-typography-link-43"> 行业会议 </a-typography-link>
      <a-typography-link class="text-[12px] !text-[#B5BCBE]" id="a-typography-link-42">更多>></a-typography-link>
    </a-flex>

    <a-flex gap="10" class="mt-2" id="a-flex-38">
      <a-typography-paragraph v-for="(item, index) in list13" :key="index" class="!mb-0 relative w-full" :id="`a-typography-paragraph-12-${index}`">
        <a-typography-text class="z-10 absolute left-0 top-0 text-[12px] text-[#fff] px-2 bg-[#FC5F6F]" :id="`a-typography-text-35-${index}`">
          {{ item.tag }}
        </a-typography-text>
        <a-flex justify="center" class="relative min-h-[180px]" :id="`a-flex-39-${index}`">
          <a-typography-link href="#" class="flex flex-col items-center w-full pt-3 bg-[#81CAEB]" :id="`a-typography-link-44-${index}`">
            <a-typography-text :id="`a-typography-text-36-${index}`">
              {{ item.name }}
            </a-typography-text>
            <a-typography-text class="text-[18px] font-bold pt-3" :id="`a-typography-text-37-${index}`">
              {{ item.subName }}
            </a-typography-text>
            <a-typography-text class="pt-3" :id="`a-typography-text-38-${index}`">
              {{ item.title }}
            </a-typography-text>
            <a-typography-text class="text-[14px] pt-3" :id="`a-typography-text-39-${index}`">
              <CodepenCircleOutlined v-if="index === 0" class="text-[#FFE66E] pr-2" :id="`a-icon-9-${index}`"/>{{ item.mobile }}
            </a-typography-text>
            <a-typography-text
              class="absolute bottom-0 left-0 p-2 text-[12px] text-[#fff] bg-black opacity-50 w-full"
              :id="`a-typography-text-40-${index}`"
            >
              <CheckCircleOutlined class="text-[#fff] pr-2" :id="`a-icon-10-${index}`"/>{{ item.time }}
            </a-typography-text>
          </a-typography-link>
        </a-flex>
        <a-flex vertical justify="space-between" class="h-20" :id="`a-flex-40-${index}`">
          <a-typography-link href="#" :id="`a-typography-link-45-${index}`">
            <a-typography-text class="pt-2 line-clamp-2" :id="`a-typography-text-41-${index}`">
              {{ item.footer }}
            </a-typography-text>
          </a-typography-link>
          <a-typography-link href="#" :id="`a-typography-link-46-${index}`">
            <a-typography-text class="text-[#B5BCBE] py-2 text-[12px]" :id="`a-typography-text-42-${index}`">
              {{ item.address }}
            </a-typography-text>
          </a-typography-link>
        </a-flex>
      </a-typography-paragraph>
    </a-flex>

    <a-divider class="h-1 !mb-0 bg-[#000155]" id="a-divider-3"/>

    <a-flex justify="space-between" class="p-3 bg-[#F8F8F8]" id="a-flex-41">
      <a-typography-link class="text-[16px] !text-[#000] font-bold" id="a-typography-link-47"> 百川盈孚专家视频 </a-typography-link>
      <a-typography-link class="text-[12px] !text-[#B5BCBE]" id="a-typography-link-48">更多>></a-typography-link>
    </a-flex>

    <a-flex justify="space-between" gap="10" class="mt-2 px-5" id="a-flex-42">
      <a-typography-paragraph class="!mb-0 w-full" v-for="(item, index) in list14" :key="index" :id="`a-typography-paragraph-13-${index}`">
        <a-flex vertical :class="item.style" :id="`a-flex-43-${index}`">
          <a-typography-link class="flex flex-col pl-3 text-[#fff]" :id="`a-typography-link-49-${index}`">
            <a-typography-text class="pt-1 text-[#fff]" :id="`a-typography-text-43-${index}`">{{ item.tag }}</a-typography-text>
            <a-typography-text class="pt-4 text-[#fff] text-[16px]" :id="`a-typography-text-44-${index}`">{{ item.name }}</a-typography-text>
            <a-typography-text class="pt-1 text-[#fff] text-[12px]" :id="`a-typography-text-45-${index}`">{{ item.subName }}</a-typography-text>
            <a-typography-text class="pt-4 text-[#fff] text-[12px]" :id="`a-typography-text-46-${index}`">{{ item.timeName }}</a-typography-text>
            <a-typography-text class="py-1 text-[#fff] text-[12px]" :id="`a-typography-text-47-${index}`">{{ item.time }}</a-typography-text>
          </a-typography-link>

          <a-button class="text-[#934A12] m-[auto] ml-3 mt-2 mb-8 !text-[12px] bg-[#FECA95]" size="small" shape="round" :id="`a-button-3-${index}`">
            <template #icon>
              <DownloadOutlined  :id="`a-button-11-${index}`" />
              点击查看详情
            </template>
          </a-button>
        </a-flex>

        <a-flex vertical justify="space-between" id="a-flex-44">
          <a-typography-link href="#" :id="`a-typography-link-50-${index}`">
            <a-typography-text class="pt-2 line-clamp-2" id="a-typography-text-48">
              {{ item.footer }}
            </a-typography-text>
          </a-typography-link>
          <a-flex justify="space-between" id="a-flex-45">
            <a-typography-link href="#" :id="`a-typography-link-51-${index}`">
              <a-typography-text class="py-2 text-[12px]" id="a-typography-text-49">
                {{ item.data }}
              </a-typography-text>
            </a-typography-link>
            <a-typography-link href="#" :id="`a-typography-link-52-${index}`">
              <a-typography-text class="text-[#B5BCBE] py-2 text-[12px]" id="a-typography-text-50">
                {{ item.people }}
              </a-typography-text>
            </a-typography-link>
          </a-flex>
        </a-flex>
      </a-typography-paragraph>
    </a-flex>

    <a-divider class="h-1 !mb-0 bg-[#000155]" id="a-divider-4"/>

    <a-flex justify="space-between" class="p-3 bg-[#F8F8F8]" id="a-flex-46">
      <a-typography-link class="text-[16px] !text-[#000] font-bold" id="a-typography-link-53"> 研究报告 </a-typography-link>
    </a-flex>

    <a-row :gutter="10" class="mt-2" id="a-row-6">
      <a-col :span="8" id="a-col-15">
        <a-flex justify="space-between" align="center" class="p-2 pl-0" id="a-flex-47">
          <a-typography-title :level="5" class="line-clamp-1 !mb-0" id="a-typography-title-12">周报</a-typography-title>
          <a-typography-link class="text-[12px] !text-[#B5BCBE]" id="a-typography-link-54">更多>></a-typography-link>
        </a-flex>
        <a-typography-paragraph class="!mb-0 border border-[#ddd] border-solid" id="a-typography-paragraph-14">
          <a-flex
            justify="space-between"
            align="center"
            class="p-2"
            :class="{ 'bg-[#F8F8F8]': index % 2 !== 0 }"
            v-for="(item, index) in list15"
            :key="index"
            :id="`a-flex-48-${index}`"
          >
            <a-typography-link class="text-[12px]" :id="`a-typography-link-55-${index}`">
              <a-typography-text class="line-clamp-1" :id="`a-typography-text-51-${index}`">{{ item.name }}</a-typography-text>
            </a-typography-link>
            <a-typography-text class="text-[12px] text-[#979496] line-clamp-1" :id="`a-typography-text-52-${index}`">{{ item.time }}</a-typography-text>
          </a-flex>
        </a-typography-paragraph>
      </a-col>
      <a-col :span="8" id="a-col-16">
        <a-flex justify="space-between" align="center" class="p-2 pl-0" id="a-flex-49">
          <a-typography-title :level="5" class="line-clamp-1 !mb-0" id="a-typography-title-13">月报</a-typography-title>
          <a-typography-link class="text-[12px] !text-[#B5BCBE]" id="a-typography-link-56">更多>></a-typography-link>
        </a-flex>
        <a-typography-paragraph class="!mb-0 border border-[#ddd] border-solid" id="a-typography-paragraph-15">
          <a-flex
            justify="space-between"
            align="center"
            class="p-2"
            :class="{ 'bg-[#F8F8F8]': index % 2 !== 0 }"
            v-for="(item, index) in list16"
            :key="index"
            :id="`a-flex-50-${index}`"
          >
            <a-typography-link class="text-[12px]" :id="`a-typography-link-57-${index}`">
              <a-typography-text class="line-clamp-1" :id="`a-typography-text-53-${index}`">{{ item.name }}</a-typography-text>
            </a-typography-link>
            <a-typography-text class="text-[12px] text-[#979496] line-clamp-54" :id="`a-typography-text-7-${index}`">{{ item.time }}</a-typography-text>
          </a-flex>
        </a-typography-paragraph>
      </a-col>
      <a-col :span="8" id="a-col-17">
        <a-flex justify="space-between" align="center" class="p-2 pl-0" id="a-flex-51">
          <a-typography-title :level="5" class="line-clamp-1 !mb-0" id="a-typography-title-14">年报</a-typography-title>
          <a-typography-link class="text-[12px] !text-[#B5BCBE]" id="a-typography-link-58">更多>></a-typography-link>
        </a-flex>
        <a-typography-paragraph class="!mb-0 border border-[#ddd] border-solid" id="a-typography-paragraph-16">
          <a-flex
            justify="space-between"
            align="center"
            class="p-2"
            :class="{ 'bg-[#F8F8F8]': index % 2 !== 0 }"
            v-for="(item, index) in list17"
            :key="index"
            :id="`a-flex-52-${index}`"
          >
            <a-typography-link class="text-[12px]" :id="`a-typography-link-59-${index}`">
              <a-typography-text class="line-clamp-1" :id="`a-typography-text-55-${index}`">{{ item.name }}</a-typography-text>
            </a-typography-link>
            <a-typography-text class="text-[12px] text-[#979496] line-clamp-1" :id="`a-typography-text-56-${index}`">{{ item.time }}</a-typography-text>
          </a-flex>
        </a-typography-paragraph>
      </a-col>
    </a-row>

    <a-row :gutter="20" class="mt-2">
      <a-col :span="8" id="a-col-18">
        <a-row :gutter="10" class="bg-[#1E2D32] h-full" id="a-row-7">
          <a-col :span="12" id="a-col-19">
            <a-image width="100%" height="100%" src="https://picsum.photos/id/8/300/100" :preview="false" id="a-image-8" />
          </a-col>
          <a-col :span="12" id="a-col-20">
            <a-flex class="py-4" justify="space-between" id="a-flex-53">
              <a-typography-paragraph class="flex-1 flex-col !mb-0" id="a-typography-paragraph-17">
                <a-typography-link class="text-[12px]" id="a-typography-link-60">
                  <a-typography-text class="line-clamp-1 py-1 text-[#fff]" id="a-typography-57">BAIINFO</a-typography-text>
                  <a-typography-text class="line-clamp-1 py-1 text-[16px] text-[#fff] font-bold" id="a-typography-text-58"
                    >BAII百川盈孚APP 3.0</a-typography-text
                  >
                  <a-typography-text class="line-clamp-1 py-1 text-[12px] text-[#fff]" id="a-typography-text-59"
                    >大数据、行情、咨询、短讯、轻松在手</a-typography-text
                  >
                </a-typography-link>
                <a-button class="text-[#fff] !text-[12px] py-1 bg-[#E15762] border-0" size="small" id="a-button-4">点击查看></a-button>
              </a-typography-paragraph>
            </a-flex>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="8" class="bg-[#2592F7]" id="a-col-21">
        <a-flex class="py-4" justify="space-between" id="a-flex-54">
          <a-typography-paragraph class="flex-1 flex-col !mb-0" id="a-typography-paragraph-18">
            <a-typography-link class="text-[12px]" id="a-typography-link-61">
              <a-typography-text class="line-clamp-1 py-1 text-[#fff]" id="a-typography-text-60">BAIINFO</a-typography-text>
              <a-typography-text class="line-clamp-1 py-1 text-[24px] text-[#fff] font-bold" id="a-typography-text-61"
                >行业大数据智能分析系统</a-typography-text
              >
            </a-typography-link>
            <a-flex id="a-flex-55">
              <a-tag color="#0A6ADB" class="!border-white" id="a-tag-3">时效性</a-tag>
              <a-tag color="#0A6ADB" class="!border-white" id="a-tag-4">丰富性</a-tag>
              <a-tag color="#0A6ADB" class="!border-white" id="a-tag-5">综合性</a-tag>
            </a-flex>
          </a-typography-paragraph>
        </a-flex>
      </a-col>
      <a-col :span="8" id="a-col-22">
        <a-row :gutter="10" class="bg-[#1E2D32]" id="a-row-8">
          <a-col :span="12" id="a-col-23">
            <a-image width="100%" height="100%" src="https://picsum.photos/id/9/300/100" :preview="false" id="a-image-9" />
          </a-col>
          <a-col :span="12" id="a-col-24">
            <a-flex class="py-4" justify="space-between" id="a-flex-56">
              <a-typography-paragraph class="flex-1 flex-col !mb-0" id="a-typography-paragraph-19">
                <a-typography-link class="text-[12px]" id="a-typography-link-62">
                  <a-typography-text class="line-clamp-1 py-1 text-[16px] text-[#fff]" id="a-typography-text-62"
                    >2024年百川盈孚年度报告</a-typography-text
                  >
                  <a-typography-text class="line-clamp-1 py-1 text-[24px] text-[#fff]" id="a-typography-text-63"
                    ><UpCircleOutlined class="pr-2" id="a-icon-12" />火热预定中...</a-typography-text
                  >
                </a-typography-link>
                <a-flex wrap="wrap" gap="5" id="a-flex-57">
                  <a-typography-link class="text-[12px] pr-10" id="a-typography-link-63">
                    <a-typography-text class="line-clamp-1 py-1 text-[12px] text-[#6AA7E9]" id="a-typography-text-64"
                      >>价格波动</a-typography-text
                    >
                  </a-typography-link>
                  <a-typography-link class="text-[12px] pr-10" id="a-typography-link-64">
                    <a-typography-text class="line-clamp-1 py-1 text-[12px] text-[#6AA7E9]" id="a-typography-text-65"
                      >>市场趋势</a-typography-text
                    >
                  </a-typography-link>
                  <a-typography-link class="text-[12px] pr-10" id="a-typography-link-65">
                    <a-typography-text class="line-clamp-1 py-1 text-[12px] text-[#6AA7E9]" id="a-typography-text-66"
                      >>数据分析</a-typography-text
                    >
                  </a-typography-link>
                  <a-typography-link class="text-[12px]" id="a-typography-link-66">
                    <a-typography-text class="line-clamp-1 py-1 text-[12px] text-[#6AA7E9]" id="a-typography-text-67"
                      >>未来行情</a-typography-text
                    >
                  </a-typography-link>
                </a-flex>
              </a-typography-paragraph>
            </a-flex>
          </a-col>
        </a-row>
      </a-col>
    </a-row>
  </div>
</template>

<script setup>
const list = {
  one: ['热点商品', '沥青', '液碱', '钢材', '线螺', '涂踱'],
  two: ['行业服务', '数据库', '行业报告', '会议会展', '采购比价'],
  three: ['产品下载', '行业大叔一句智能分析系统', '百川盈浮APP'],
};
const list1 = [
  '汽车原料辅料产业链',
  '水处理原辅料产业钱',
  '医药原辅料产业链。',
  '光伏行业相关产业链',
  '轮胎产业链',
  '电池原辅料产业链',
  '钢铁原辅料产业链',
  '造纸原辅料产业链',
];
const list2 = [
  {
    style: 'bg-[#EBECF1]',
    name: '百川盈孚2025年(第十八届)',
    title: '煤化工行业年会',
    subTitle: '暨客户见面会',
    time: '2025年2月17-19号   杭州',
    color: '#b3cce2',
  },
  {
    style: 'bg-[#DFE9F1]',
    name: '百川盈孚2025年(第十二届)',
    title: '化肥产业链研讨会',
    subTitle: '暨客户见面会',
    time: '2025年2月17-19号 重庆',
    color: '#edb7b7',
  },
  {
    style: 'bg-[#FCDDDB]',
    name: '百川盈孚2025年(第十八届)',
    title: '石油焦市场研讨会',
    subTitle: '暨客户见面会',
    time: '2025年2月17-19号 杭州',
    color: '#FFF2EC',
  },
  {
    style: 'bg-[#BADFF2]',
    name: '百川盈孚2025年(第十届)',
    title: '锂市场交流会',
    subTitle: '',
    time: '2025年2月17-19号 长沙',
    color: '#7DC7EC',
  },
  {
    style: 'bg-[#FAE1C8]',
    name: '百川盈孚2025年(第三届)',
    title: '甲醛产业链市场形势',
    subTitle: '及技术研讨会',
    time: '2025年2月17-19号 济南',
    color: '#FCE3CF',
  },
  {
    style: 'bg-[#C8ECD5]',
    name: '百川盈孚2025年(第八届)',
    title: '甲醛及下游产业链市场',
    subTitle: '交流会暨绿色甲醛发展大会',
    time: '2025年2月17-19号 济南',
    color: '#CFF7EF',
  },
];
const list3 = [
  {
    name: '玉米',
    one: '2063',
    type: 'down',
    two: '-2.00',
  },
  {
    name: '碳酸锂',
    one: '2063',
    type: 'up',
    two: '1000.00',
  },
  {
    name: '螺纹钢',
    one: '2063',
    type: 'up',
    two: '5.00',
  },
  {
    name: '申解铜',
    one: '2063',
    type: 'up',
    two: '390.00',
  },
  {
    name: '聚乙烯',
    one: '2063',
    type: 'down',
    two: '-50.00',
  },
  {
    name: '豆油',
    one: '2063',
    type: 'down',
    two: '-150.00',
  },
  {
    name: '汽油',
    one: '2063',
    type: 'down',
    two: '-31.00',
  },
  {
    name: '电解铝',
    one: '2063',
    type: 'up',
    two: '-140.00',
  },
];
const list4 = [
  {
    name: '锌精矿(元/吨)',
    price: '20010',
    down1: '-280',
    down2: '-1.38%',
  },
  {
    name: '甲苯(元/吨)',
    price: '6672',
    down1: '-96',
    down2: '-1.42%',
  },
  {
    name: '白刚玉(元/吨)',
    price: '20010',
    down1: '-334',
    down2: '-1.43%',
  },
  {
    name: '锌锭(元/吨)',
    price: '20010',
    down1: '-350',
    down2: '-1.43%',
  },
  {
    name: '醚后碳四(元/吨)',
    price: '20010',
    down1: '-123',
    down2: '-1.46%',
  },
  {
    name: '生猪(元/吨)',
    price: '16.07',
    down1: '-0.25',
    down2: '-1.53%',
  },
];
const list5 = [
  {
    name: '【碳酸二甲酯】',
    title: '下游节前备货，价格高涨困难',
  },
  {
    name: '【铅】',
    title: '节动轮价的稳运行，关注下游体服交用',
  },
  {
    name: '【铟】',
    title: '铟市场石涨情绪增强，市场活跃度提升',
  },
  {
    name: '【原盐】',
    title: '下游年前囤货，工业盐行情偏暖运行',
  },
];
const list6 = [
  '百川盈学2025年(第十二届)化肥产业链研讨会暨客',
  '百川盈孚2025年锂市场交流会',
  '百川盈孚2025年(第十五届)稀土产业大会',
  '百川盈孚2025年(第九届)磷化工市场研讨会',
  '百川盈孚2025年(第五届)农药市场研讨会',
];
const list7 = [
  {
    name: '国家发改委价格检测中心',
    tag: ['甲醇', '沥青', '纯碱', '尿素', '碳酸锂', '电解钢', '电解铝', '金属硅'],
    title: '百川英孚大宗商品价格参考：',
  },
  {
    name: '中国产业发展促进会',
    title: '常数 保力有会万区公析 大常数 保力有会万区公析 大常数 保力有会万区公析 大常数',
  },
  {
    name: '万得信息技术股份优先公司',
    title: '同后加经中以交信的的家统。同后加经中以交信的的家统。同后加经中以交信的的家统。',
  },
  {
    name: '上海化工宝数字科技有限公司',
    title: '资源头安、如品合作等自作关系，包种资源头安、如品合作等自作关系，包种',
  },
  {
    name: '上海钢之家信息科技有限公司',
    title: '信美经经川海学行人交局自能信美经经川海学行人交局自能信美经经川海学行人交局自能',
  },
];
const list77 = [
  '1月17日讯，国内期货早盘收盘，主力合约涨跌不一。纯碱、玻璃涨超3%，尿素、氧化铝、沪锌、焦煤涨超',
  '1月17日讯，国内期货早盘收盘，主力合约涨跌不一。纯碱、玻璃涨超3%，尿素、氧化铝、沪锌、焦煤涨超',
];
const list777 = [
  '百川盈学2025年(第十二届)化肥产业链研讨会暨客',
  '百川盈孚2025年锂市场交流会',
  '百川盈孚2025年(第十五届)稀土产业大会',
  '百川盈孚2025年(第九届)磷化工市场研讨会',
  '百川盈孚2025年(第五届)农药市场研讨会',
];
const list8 = [
  '沥青价格',
  '稀土价格',
  '石油焦价格',
  '电解铝价格',
  '湿法磷酸价格',
  '针状焦价格',
  '醋酸价格',
  '苯酐价格',
  '甲醇价格',
  '甲醛价格',
  '水泥价格',
  '车用尿素价格',
];

const list9 = ['市场价格', '出厂价格', '国际价格', '期货价格', '进ロ数据', '岀ロ数据'];

const list10 = [
  {
    name: '知情人士称拜登政府将不执行TikTok禁令',
    time: '01-17 09:06',
  },
  {
    name: '美“星舰”实施第七次试飞',
    time: '01-17 09:06',
  },
  {
    name: '美联储仍处降息周期 金价有望延续偏强行',
    time: '01-17 09:06',
  },
  {
    name: '卡塔尔首相要求以军徽出戈兰高地缓;中区',
    time: '01-17 09:06',
  },
  {
    name: '百川盈孚每日宏观经济导读20250117',
    time: '01-17 09:06',
  },
  {
    name: '习近平主席特别代表韩正将出席美国总统',
    time: '01-17 09:06',
  },
  {
    name: '商务部新闻发言人就诉士耳其电动汽车和.',
    time: '01-17 09:06',
  },
  {
    name: '预告:国新办举行“中国经济高质量发展',
    time: '01-17 09:06',
  },
];

const list11 = [
  {
    name: '醋酸(叫北)',
    time: '2018-04',
    num1: '234',
    num2: '3451',
  },
  {
    name: '醋酸(辽宁)',
    time: '2018-04',
    num1: '23',
    num2: '1242',
  },
  {
    name: '醋酸(河南)',
    time: '2018-04',
    num1: '34',
    num2: '7544',
  },
  {
    name: '醋酸(广东)',
    time: '2018-04',
    num1: '66',
    num2: '1632',
  },
  {
    name: '醋酸(褔建)',
    time: '2018-04',
    num1: '723',
    num2: '34512',
  },
  {
    name: '醋酸(上海)',
    time: '2018-04',
    num1: '341',
    num2: '32343',
  },
  {
    name: '醋酸(江苏)',
    time: '2018-04',
    num1: '44',
    num2: '1234',
  },
  {
    name: '鷗酸( 北',
    time: '2018-04',
    num1: '36',
    num2: '11251',
  },
];

const list12 = [
  ['铝产业链', '氧化锠', '电解锠', '预焙阳极', '石油焦', '波碱', '纯碱'],
  ['大煤化产业链', '煤炭', '动力煤', '炼焦煤', '无烟煤', '嘍吹煤', '电力'],
  ['汽车原料产业链', '中板', '特钢', '铜精矿', '冷轧', '热轧', '干胶'],
  ['建筑工程专栏', '水泥', '平板玻璃', '特种水泥', '水泥熟料', '矿粉'],
];

const list13 = [
  {
    tag: '未开始',
    name: '百川盈孚2025年(第十八届)',
    subName: '化肥产业链研讨会',
    title: '暨客户见面会',
    mobile: '18618305717 15094019049',
    time: '时间：2025-02-17至2025-02-19',
    footer: '百川盈孚2025年(第十八届)化肥产业链研讨会暨客户见面会',
    address: '重庆',
  },
  {
    tag: '未开始',
    name: '百川盈孚2025年',
    subName: '粗苯及纯苯产业链',
    title: '市场研讨会',
    mobile: '18710873936',
    time: '时间：2025-02-17至2025-02-19',
    footer: '百川盈孚2025年粗苯及纯苯产业链市场研讨会',
    address: '待定',
  },
  {
    tag: '未开始',
    name: '百川盈孚2025年',
    subName: '锂市场交流会',
    title: '',
    mobile: '18840619590',
    time: '时间：2025-02-17至2025-02-19',
    footer: '百川盈孚2025年锂市场交流会',
    address: '重庆',
  },
  {
    tag: '未开始',
    name: '百川盈孚2025年(第十五届)',
    subName: '稀土产业大会',
    title: '暨客户见面会',
    mobile: '18618305717 15094019049',
    time: '时间：2025-02-17至2025-02-19',
    footer: '百川盈孚2025年(第十五届)稀土产业大会',
    address: '广州',
  },
  {
    tag: '未开始',
    name: '百川盈孚2025年(第十九届)',
    subName: '磷化工市场研讨会',
    title: '',
    mobile: '18618305717 15094019049 15094019049',
    mobile1: '15094019049',
    time: '时间：2025-02-17至2025-02-19',
    footer: '百川盈孚2025年(第十九届)磷化工市场研讨会',
    address: '待定',
  },
];

const list14 = [
  {
    style: 'bg-[#6478E9]',
    tag: 'BAIINFO',
    name: '加氢纯苯、乙烯焦油',
    subName: '大宗商品热点解读',
    timeName: '时间',
    time: '2025-02-17',
    btn: '点击产看',
    footer: '加氢纯苯、乙烯焦油大宗商品热点解读',
    data: '2025-02-17',
    people: '金贵玉,梁晓玉',
  },
  {
    style: 'bg-[#2A3054]',
    tag: 'BAIINFO',
    name: '钛精矿、金属硅',
    subName: '大宗商品热点解读',
    timeName: '时间',
    time: '2025-02-17',
    btn: '点击产看',
    footer: '钛精矿、金属硅-大宗商品热点解读',
    data: '2025-02-17',
    people: '贾若男,张伊迪',
  },
  {
    style: 'bg-[#BF1C21]',
    tag: 'BAIINFO',
    name: '碳酸二甲酯、电解液',
    subName: '大宗商品热点解读',
    timeName: '时间',
    time: '2025-02-17',
    btn: '点击产看',
    footer: '碳酸二甲酯、电解液-大宗商品热点解读',
    data: '2025-02-17',
    people: '沈雨丝,刘思懿',
  },
  {
    style: 'bg-[#2A2A60]',
    tag: 'BAIINFO',
    name: '白糖、葡萄糖',
    subName: '大宗商品热点解读',
    timeName: '时间',
    time: '2025-02-17',
    btn: '点击产看',
    footer: '白糖、葡萄糖-大宗商品热点解读',
    data: '2025-02-17',
    people: '黄雪,周小俪',
  },
  {
    style: 'bg-[#4D4958]',
    tag: 'BAIINFO',
    name: '加氢纯苯、乙烯焦油',
    subName: '大宗商品热点解读',
    timeName: '时间',
    time: '2025-02-17',
    btn: '点击产看',
    footer: '甘油、棕榈油-大宗商品热点解',
    data: '2025-02-17',
    people: '代国玉,李宇航',
  },
];

const list15 = [
  {
    name: '百川盈孚VIP信息服务周刊-分散-活性染料',
    time: '01-17 14:59 ',
  },
  {
    name: '百川盈孚VIP信息服务周刊-油脂化工专刊',
    time: '01-17 14:59 ',
  },
  {
    name: '百川盈孚VIP信息服务周刊-甘油专刊-第2',
    time: '01-17 14:59 ',
  },
  {
    name: '百川盈孚VIP信息服务周刊-玉米纤维专刊',
    time: '01-17 14:5 9 ',
  },
  {
    name: '百川盈孚VIP信息服务周刊-乙苯专刊-第2',
    time: '01-17 14:59 ',
  },
  {
    name: '百川盈孚VIP信息服务周刊-镍铁专刊-第2',
    time: '01-17 14:59 ',
  },
  {
    name: '百川盈孚VIP信息服务周刊-DIBK专刊-第2',
    time: '01-17 14:59 ',
  },
  {
    name: '百川盈孚VIP信息服务周刊·氯化亚砜专刊',
    time: '01-17 14:59 ',
  },
];

const list16 = [
  {
    name: '百川盈孚VIP信息服务月刊环氧乙烷专刊',
    time: '12-30 16:41',
  },
  {
    name: '百川盈孚VIP信息服务月刊-豆油专刊-第2',
    time: '12-30 16:41',
  },
  {
    name: '百川盈孚VIP信息服务月刊-ADC发泡剂专',
    time: '12-30 16:41',
  },
  {
    name: '百川盈孚VIP信息服务月刊-玉米纤维专刊',
    time: '12-30 16:41',
  },
  {
    name: '百川盈孚VIP信息服务周刊-乙苯专刊-第2',
    time: '12-30 16:41',
  },
  {
    name: '百川盈孚VIP信息服务月刊-杂粕专刊-第2',
    time: '12-30 16:41',
  },
  {
    name: '百川盈孚VIP信息服务周刊·杂粕专刊·第2',
    time: '12-30 16:41',
  },
  {
    name: '百川盈孚VIP信息服务月刊-醋酸酯类专刊',
    time: '12-30 16:41',
  },
];

const list17 = [
  {
    name: '百川盈孚2024年中国乙烯焦油市场报告',
    time: '12-19 13:26 ',
  },
  {
    name: '百川盈孚2024年中国蒽油市场报告',
    time: '12-19 13:26 ',
  },
  {
    name: '百川盈孚2024年中国特种沥青市场年度报',
    time: '12-19 13:26 ',
  },
  {
    name: '百川盈孚2024年中国煤沥青市场年度报告',
    time: '12-19 13:26 ',
  },
  {
    name: '百川盈孚2024年中国锂电负极材料市场报',
    time: '12-19 13:26 ',
  },
  {
    name: '百川盈孚2024年中国针状焦市场报告',
    time: '12-19 13:26 ',
  },
  {
    name: '百川盈孚2024年中国钢用炭素市场报告目',
    time: '12-19 13:26 ',
  },
  {
    name: '百川盈孚2024年中国天然石墨市场报告目',
    time: '12-19 13:26 ',
  },
];
</script>
<style></style>
